<template>
  <div class="various_association_bind">
    <div style="height: 20vh;"></div>
    <div>
      <div>
        <p><img :src="data.tsLogo" width="100%"/></p>
      </div>

      <div class="item">
        <input maxlength="11" v-model.trim="mobile" placeholder="请填写手机号码"/>
      </div>

      <div class="item auto_p">
        <input v-model.trim="code" maxlength="6" placeholder="请填写验证码"/>
        <div :class="'autoCodeActive' + (timeNum == 60 ? '' : ' autoCodeActive-grey')" v-html="timeText"
             @click='getAutoCode($event.target)'></div>
      </div>
      <div class="mui-btn-blues" @click="verify">验证</div>
    </div>


  </div>
</template>

<script>
  import ApplyAPI from '../../../repo/api/applyAPI'
  import {pattern} from 'as-common'
  import {Toast} from 'vant'

  export default {
    name: 'activate-course.vue',
    data () {
      return {
        show: false,
        data: '',
        mobile: '',
        autoCode: '',
        timeNum: 60,
        submit: false,
        timeText: '获取验证码',
        code: '',
        timeIndex: null,
        tsId: this.$route.query.hy
      }
    },
    created () {
      this.getTsInfoById()
    },
    computed: {
    },
    methods: {
      verify () {
        ApplyAPI.drawGuilingSubjectOrder(this.tsId, this.mobile, this.code).then((result) => {
          Toast(result.responseData.resultInfo)
          setTimeout(() => {
            window.history.back()
          }, 200)

        }).catch((e) => {
          console.log(e)
        })
      },
      getTsInfoById () {
        ApplyAPI.getTSInfoById(this.tsId).then((result) => {
          this.data = result.responseData
        })
      },
      getAutoCode (obj) {
        if (this.timeNum !== 60) return
        let patt = new RegExp(pattern.mobile)
        let mobile = this.mobile
        if (mobile == '') {
          Toast('请填写手机号码')
          return
        } else if (!patt.test(mobile)) {
          Toast('请填正确手机号')
          return
        }

        ApplyAPI.getAutoCode(this.tsId, this.mobile).then((res) => {
          let resData = res.responseData
          Toast(resData.msg)
        }).catch((e) => {
          this.clearReciprocal(obj)
          Toast(e.errorInfo)
        })
        this.reciprocal(obj)

      },

      reciprocal (obj) {
        if (this.timeNum === 0) {
          this.clearReciprocal(obj)
          return
        }

        obj.setAttribute('disabled', true)
        this.timeText = '重新获取' + this.timeNum + 's'
        this.timeNum--
        this.timeIndex = setTimeout(() => {
          this.reciprocal(obj)
        }, 1000)

      },
      clearReciprocal (obj) {
        clearTimeout(this.timeIndex)
        this.timeIndex = null
        obj.removeAttribute('disabled')
        this.timeText = '获取验证码'
        this.timeNum = 60
      },

    }
  }
</script>

<style scoped>
  .mui-btn-blues {
    background: linear-gradient(to right, #1DA1F2, #3ECFFA);
    color: white;
    height: 48px;
    border-radius: 25px;
    width: 95%;
    font-size: 18px;
    margin: 0px auto;
    text-align: center;
    line-height: 48px;

  }

  .item input {
    background: #F2F5F8;
    width: 95%;
    border-radius: 25px;
    margin: 20px auto;
    height: 48px;
    line-height: 48px;
    text-indent: 12px;
    display: block;
  }

  .auto_p {
    position: relative;
  }

  .autoCodeActive {
    position: absolute;
    right: 10%;
    top: 0px;
    height: 48px;
    line-height: 48px;
    color: #1DA1F2;

  }
  .autoCodeActive-grey{
    color:#808080;
}
  .various_association_bind {
    height: 100vh;
    background: white;
  }

  .flex_box_container {
    width: 750px;
    margin: 0 auto;
  }
</style>
